<template>
  <div class="box">
    <a-modal
      :closable="false"
      :visible="true"
      :footer="null"
      width="40%"
      class="modal_box"
      :title="title"
    >
      <div class="content">
        <div class="item" v-for="(item,index) in dataTarget" :key="item.id" :class="{active:item.isactive}" @click="clickItem(index)">
          {{ item.content }}
        </div>
      </div>
      <div class="footer">
        <a-button @click="onCancel">取消</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'CustomIndicators',
  data () {
    return {
      title: <div slot='title'style="font-size:4%;color:#666">请选择您要查看的数据指标<font color="#f00">(最多10个)</font></div>, // 自定义标题
      dataTarget: [
        {
          id: 1,
          content: '花费',
          isactive: false
        },
        {
          id: 2,
          content: '曝光',
          isactive: false
        },
        {
          id: 3,
          content: '花费',
          isactive: false
        },
        {
          id: 4,
          content: '曝光',
          isactive: false
        },
        {
          id: 5,
          content: '花费',
          isactive: false
        },
        {
          id: 6,
          content: '曝光',
          isactive: false
        }
      ]
    }
  },
  methods: {
    onCancel () {
      this.$emit('onClose')
    },
    onSubmit () {
      this.$emit('onClose')
    },
    clickItem (index) {
      console.log(index)
      this.dataTarget[index].isactive = !this.dataTarget[index].isactive
      console.log(this.dataTarget)
    }
  }
}
</script>
<style lang="less" scoped>
.modal_box {
  .content {
     display:flex;
     flex-wrap: wrap;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width:120px;
      height:40px;
      border-radius:4px;
      background:#f7f7f7;
      margin: 2% 1% 0px 5%;
    }
    .active {
      color:#fff;
      background:#1890ff
    }
  }
  .footer {
    margin-top:10%;
    display: flex;
    justify-content: center;
    align-items: center;
    .ant-btn-primary {
      margin-left: 5%;
    }
  }
}
</style>
